<template>
  <section class="container" v-title data-title="好友邀请" :class="{overflow:isActive}">

    <div class="register" >
      <simplert  ref="simplert"></simplert>
      <div class="header">
        <div class="banner">
          <img src="../styles/asset/register/banner1.png" alt="">
          <p class="text1">可获得8元优惠券</p>
          <p class="text2">8</p>
        </div>
<!--         <div class="face_value">
          <img src="../styles/asset/register/face_value.png" alt="">
        </div> -->
        <div class="inviter">
          <span>您的邀请码：</span>
          <span class="phone">{{inviterPhone}}</span>
        </div>
      </div>
      <div class="invite_btn" @click='registerBtn'>邀请好友</div>
      <div class="cash_coupon">
        <div class="have_got">
          <p>您已获得<span>{{alreadyReceive}}劵</span></p>
          <div>已领取</div>
        </div>
        <div class="not_get" @click="jump(0)">
          <p>待领取<span>{{waitReceive}}劵</span></p>
          <div>去领取</div>
        </div>
      </div>
      <div class="has_inviter d_jump">
        <div class="nav">
          <div class="nav_item"
              v-for="(item,index) in nav"
              :class="{'active':ind === index}"
               @click="change(index)">
            <p class="nav_tit">{{item.name}}</p>
            <p class="user_num">{{item.num}}</p>
          </div>
        </div>
        <div class="user_list">
          <div class="user active">
              <div class="user_item"
                v-for="(item,index) in inviteListAll"

                >
                <div class="user_photo"><img :src="item.avatarUrl?item.avatarUrl:userPhoto" alt=""><span :class="statusText[item.inviteStatus][0]">{{statusText[item.inviteStatus][1]}}</span></div>
                <div class="user_phone">
                  <p class="user_name">{{item.userName}}{{statusText[item.inviteStatus][1]}}</p>
                  <p class="have">您已获得<span>{{item.alreadyReceive}}</span>劵</p>
                </div>
                <div class="user_invite">
                  <div class="btn" :data-smsContent="item.smsContent" :data-id="item.invitedId" @click="registerClick($event)" v-show="item.inviteStatus!=3">
                    <div class="btn_left">邀请{{statusText[item.inviteStatus][2]}}</div>
                    <div class="btn_right">再领{{item.waitReceive}}劵</div>
                  </div>
                </div>
              </div>
          </div>
          <div class="user">
              <div class="user_item"
                v-for="(item,index) in inviteList1"

                >
                <div class="user_photo"><img :src="item.avatarUrl?item.avatarUrl:userPhoto" alt=""><span :class="statusText[item.inviteStatus][0]">{{statusText[item.inviteStatus][1]}}</span></div>
                <div class="user_phone">
                  <p class="user_name">{{item.userName}}{{statusText[item.inviteStatus][1]}}</p>
                  <p class="have">您已获得<span>{{item.alreadyReceive}}</span>劵</p>
                </div>
                <div class="user_invite">
                  <div class="btn" :data-smsContent="item.smsContent" :data-id="item.invitedId" @click="registerClick($event)" v-show="item.inviteStatus!=3">
                    <div class="btn_left">邀请{{statusText[item.inviteStatus][2]}}</div>
                    <div class="btn_right">再领{{item.waitReceive}}劵</div>
                  </div>
                </div>
              </div>
          </div>
          <div class="user">
              <div class="user_item"
                v-for="(item,index) in inviteList2"

                >
                <div class="user_photo"><img :src="item.avatarUrl?item.avatarUrl:userPhoto" alt=""><span :class="statusText[item.inviteStatus][0]">{{statusText[item.inviteStatus][1]}}</span></div>
                <div class="user_phone">
                  <p class="user_name">{{item.userName}}{{statusText[item.inviteStatus][1]}}</p>
                  <p class="have">您已获得<span>{{item.alreadyReceive}}</span>劵</p>
                </div>
                <div class="user_invite">
                  <div class="btn" :data-smsContent="item.smsContent" :data-id="item.invitedId" @click="registerClick($event)" v-show="item.inviteStatus!=3">
                    <div class="btn_left">邀请{{statusText[item.inviteStatus][2]}}</div>
                    <div class="btn_right">再领{{item.waitReceive}}劵</div>
                  </div>
                </div>
              </div>
          </div>
          <div class="user">
              <div class="user_item"
                v-for="(item,index) in inviteList3"

                >
                <div class="user_photo"><img :src="item.avatarUrl?item.avatarUrl:userPhoto" alt=""><span :class="statusText[item.inviteStatus][0]">{{statusText[item.inviteStatus][1]}}</span></div>
                <div class="user_phone">
                  <p class="user_name">{{item.userName}}{{statusText[item.inviteStatus][1]}}</p>
                  <p class="have">您已获得<span>{{item.alreadyReceive}}</span>劵</p>
                </div>
                <div class="user_invite">
                  <div class="btn" :data-smsContent="item.smsContent" :data-id="item.invitedId" @click="registerClick($event)" v-show="item.inviteStatus!=3">
                    <div class="btn_left">邀请{{statusText[item.inviteStatus][2]}}</div>
                    <div class="btn_right">再领{{item.waitReceive}}劵</div>
                  </div>
                </div>
              </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 分享 -->
    <div class="shade" :class="{ 'bg': isActive, 'modal_show': isActive }" >
      <div class="share" :class="{ 'fadeInUpBig': isActive, 'fadeInDownBig': !isActive }">
        <div class="share_btn">
          <div class="left_circle" @click="openCircle()">
            <div class="ioc"></div>
          </div>
          <div class="right_friends" @click="openFriends()">
            <div class="ioc"></div>
          </div>
        </div>
        <div class="clear" @click='clearBtn'>取消</div>
      </div>
    </div>
    <!-- 短信 -->
    <div class="note" :class="{ 'bg': isNote, 'modal_show': isNote }" :style="{'top':top}">
      <div class="dialog">
        <div class="note_content">{{this.smsContent}}</div>
        <div class="note_btnBox">
          <div class="clear_send" @click="clearClick()">取消发送</div>
          <div class="confirm" @click="confirmClick()">确认发送</div>
        </div>
      </div>
    </div>

  </section>
</template>


<script>
  var wx = require('weixin-js-sdk');
  import Simplert from '../../components/dialog/dialog.vue'
  import md5 from '../../config/md5'

  export default {
    data() {
      return {
        nav:[
          {name:'邀请好友',num:0 },
          {name:'注册人数',num:0 },
          {name:'缴押金人数',num:0 },
          {name:'用车人数',num:0 }
        ],
        statusText: {
          1: ['span-delay', '已注册','缴押金'],
          2: ['span-finish', '已缴押金','用车'],
          3: ['span-rough', '已用车',''],
        },//显示状态
        ind: 0,
        top:'0px',
        pos:0,
        isNote:false,
        isActive:false,
        inviterPhone: '',
        type: '1',
        img: require('../../activities/styles/asset/car-share.png'),
        userPhoto: require('../styles/asset/tx.png'),
        show: false,
        shade:false,
        scroll: '',
        wx_app:'',
        alreadyReceive:0,//已领取优惠券金额
        waitReceive:0,//未领取优惠券金额
        inviteStatus:'',//邀请状态
        page:1,
        rows:20,
        invitedId:'',//被邀请人id
        smsContent:'',//被邀请人短信模板
        inviteListAll:[],
        inviteList1:[],
        inviteList2:[],
        inviteList3:[],
        // sum:0//获取金额
      }
    },
    created() {

    },
    mounted() {

      const that = this;
      const url = window.location.href;
      let root = process.env.MAIN_ROOT;
      // this.sum = this.$util.parseURL(url).params.sum;
      // if(!this.sum){
      //   this.sum = 0
      // }
      console.log(this.inviterPhone)
      if(url.indexOf('wx_app')>0){
        this.wx_app = this.$util.parseURL(url).params.wx_app;
        this.detail = this.$util.parseURL(url).params.detail;
      }else{
        this.wx_app = ''
      }

      this.$util.getUserToken().then(token=>{
        that.token = token;
        // if(!this.inviterPhone){
          that.inviteHome();
          that.inviteList()
        // }
      })

      this.$util.sendShareMessage("有驾照的统统看过来，快来试试>>","快来开共享汽车！注册即送 共享汽车68元代金券", root+this.img ,root+'/#/app/invitationRegisterGeneral?inviterPhone='+ this.inviterPhone);
      this.show = true;
      if(url.indexOf('wx_app')>0){
        // 小程序分享title，url
        wx.miniProgram.postMessage({
          data: {
            title: '邀请注册',
            wx_url: '/#/app/invitationRegisterGeneral?detail=false&wx_app=wx_app&inviterPhone='+ this.inviterPhone
          }
        })
      }
      window.addEventListener('scroll', this.menu);


    },
    components: {
      Simplert
    },
    activated() {
        this.$el.scrollTop = this.pos
    },
    methods: {
      registerBtn(){
        this.isActive=!this.isActive
      },
      clearBtn(){
        this.isActive=!this.isActive
      },
      //发送短信
      registerClick(e){
        this.invitedId = e.currentTarget.getAttribute('data-id');
        this.smsContent = e.currentTarget.getAttribute('data-smsContent');
        console.log(e.currentTarget.getAttribute('data-id'));
        this.top = (document.documentElement.scrollTop|| document.body.scrollTop )+'px';
        this.isNote=!this.isNote
      },
      //
      clearClick(){
        console.log('取消发送！');
        this.isNote=!this.isNote
      },
      confirmClick(){
        // console.log(this.invitedId,'发送成功！')
        const that = this;
        let timestamp = new Date().getTime();
        this.$api.post('/user/v1/authApi/inviteSms?invitedId=' + this.invitedId + '&currentTimeMillis=' + timestamp + '&sign=' + md5.md5(this.invitedId + timestamp + '$2a$10$tN1oXrlt3By5ufEcYqdZ6.').toLowerCase(),{},s=>{
             that.open('发送成功',false,'','','fade_success',function(){});
          },f=>{
            that.open(f.errorMessage,false,'','','fade_alert',function(){});
          },{
          'requestPlatform': that.wx_app,
          'token': that.token
          // 'token': 'eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJzZWNhciIsImFwcGtleSI6IjE3NjAyMTE4ODY5Iiwic2VjcmV0IjoiOWE1ZjRjNDVhZjlmNTZlYWQzMjEwY2NhZmMxYzY1ZTEifQ.28iQyHBUujp3kBZEEP1a7A7vc7cd2cTVePXAPfQO7Dc'
        })
        this.isNote=!this.isNote
      },
      change(index){
         this.ind = index;
         this.inviteStatus = index;
         this.inviteList(index)
         var uselist = document.querySelectorAll(".user");
        for(var i=0;i<uselist.length;i++){
            uselist[i].style.display = 'none';
        }
        uselist[index].style.display = 'block';
      },
      jump(index){
        // 用 class="d_jump" 添加锚点
        let jump = document.querySelectorAll('.d_jump');
        let total = jump[index].offsetTop;
        let total1 = jump[index].scrollTop;
        console.log(total,document.documentElement.scrollTop);
        let distance = document.documentElement.scrollTop || document.body.scrollTop;
        let step = total
        smoothDown()
        function smoothDown () {
          if (distance < total) {
            distance += step
　　　　　　　document.body.scrollTop = distance
            document.documentElement.scrollTop = distance
            // setTimeout(smoothDown, 3)
          } else {
            document.body.scrollTop = total
            document.documentElement.scrollTop = total
          }
        }
      },
      // 获取好友邀请数据
      inviteHome(){
        const that = this;
        this.$api.post('/user/v1/authApi/inviteHome',{},s=>{
            that.alreadyReceive = s.module.alreadyReceive;
            that.waitReceive = s.module.waitReceive;
            that.inviterPhone = s.module.inviteCode;
          },f=>{
            that.open('用户信息获取失败',false,'','','fade_alert',function(){});
          },{
          'requestPlatform': that.wx_app,
          'token': that.token
          // 'token': 'eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJzZWNhciIsImFwcGtleSI6IjE3NjAyMTE4ODY5Iiwic2VjcmV0IjoiOWE1ZjRjNDVhZjlmNTZlYWQzMjEwY2NhZmMxYzY1ZTEifQ.28iQyHBUujp3kBZEEP1a7A7vc7cd2cTVePXAPfQO7Dc'
        })
      },
      // 获取好友邀请列表POST /user/v1/authApi/inviteList
      inviteList(){
        const that = this;
        if(this.inviteStatus == 0){
          this.inviteStatus = '';
        }
        this.$api.post('/user/v1/authApi/inviteList?inviteStatus='+this.inviteStatus+'&page='+this.page+'&rows='+this.rows,{},s=>{
            this.obj = s.obj;
            this.nav[0].num = s.obj.allCount;
            this.nav[1].num = s.obj.regCount;
            this.nav[2].num = s.obj.depositCount;
            this.nav[3].num = s.obj.useCarCount;
            switch(this.inviteStatus){
                case 1:
                  this.inviteList1 = s.module.list
                  break;
                case 2:
                  this.inviteList2 = s.module.list
                  break;
                case 3:
                  this.inviteList3 = s.module.list
                  break;
                default:
                  this.inviteListAll = s.module.list
            }
          },f=>{
            that.open('用户信息获取失败',false,'','','fade_alert',function(){});
          },{
          'requestPlatform': that.wx_app,
          'token': that.token
          // 'token': 'eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJzZWNhciIsImFwcGtleSI6IjE3NjAyMTE4ODY5Iiwic2VjcmV0IjoiOWE1ZjRjNDVhZjlmNTZlYWQzMjEwY2NhZmMxYzY1ZTEifQ.28iQyHBUujp3kBZEEP1a7A7vc7cd2cTVePXAPfQO7Dc'
        })
      },
      menu() {
        this.scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      },
      open (title, confirmBtn,customConfirmBtnText,onConfirm,type,onClose,message) {
        let obj = {
          title: title,
          useConfirmBtn: confirmBtn,
          customConfirmBtnText: customConfirmBtnText,
          onConfirm:onConfirm,
          type: type,
          onClose:onClose,
          message:message
        };
        this.$refs.simplert.openSimplert(obj);
      },
      openCircle() {
        //朋友圈
        let userAgentObj = navigator.userAgent;
        let root = process.env.MAIN_ROOT;
        if(userAgentObj.match(/Android/i)){
          window.control.WXSceneTimeline('有驾照的统统看过来，快来试试>>','快来开共享汽车！注册即送 共享汽车68元代金券',root+this.img,root+'/#/app/invitationRegisterGeneral?inviterPhone='+ this.inviterPhone);
        }else if(userAgentObj.match(/iPhone/i)){
          this.shade = true;
          // this.$util.sendShareMessage("有驾照的统统看过来，快来试试>>","快来开共享汽车！注册即送 共享汽车68元代金券", root+this.img,root+'/#/app/invitationRegisterGeneral?inviterPhone='+ this.inviterPhone);
          WXSceneTimeline("有驾照的统统看过来，快来试试>>","快来开共享汽车！注册即送 共享汽车68元代金券", root+this.img,root+'/#/app/invitationRegisterGeneral?inviterPhone='+ this.inviterPhone);
        }
      },
      openFriends() {
        //好友
        let userAgentObj = navigator.userAgent;
        let root = process.env.MAIN_ROOT;
        if(userAgentObj.match(/Android/i)){
          window.control.WXSceneSession('有驾照的统统看过来，快来试试>>','快来开共享汽车！注册即送 共享汽车68元代金券',root+this.img,root+'/#/app/invitationRegisterGeneral?inviterPhone='+ this.inviterPhone);
        }else if(userAgentObj.match(/iPhone/i)){
          this.shade = true;
          // this.$util.sendShareMessage("有驾照的统统看过来，快来试试>>","快来开共享汽车！注册即送 共享汽车68元代金券", root+this.img,root+'/#/app/invitationRegisterGeneral?inviterPhone='+ this.inviterPhone);
          WXSceneSession("有驾照的统统看过来，快来试试>>","快来开共享汽车！注册即送 共享汽车68元代金券", root+this.img,root+'/#/app/invitationRegisterGeneral?inviterPhone='+ this.inviterPhone);
        }
      },
      shadeClick () {
          this.shade = false;
      }
    }
  }
</script>
<style scoped >
  @import "../../activities/styles/styles.css";
  /* *{
    transform: none;
  } */
  body {
    background: #eeeeee;
  }
  #app{
     overflow-y: auto;
  }
  .container {
    position: relative;
    /* overflow-y: auto; */
    width: 100%;
    height: 100%;
    font-size: 0.30rem;
    background: #fcfcfc;
  }
  .register {
    overflow-y: auto;
    margin: 0 auto;
    max-width: 750px;
    display: flex;
    flex-wrap: wrap;
    background: #fff;
  }
  .overflow{
    overflow: hidden;
  }
  .header{
    width:100%;
  }
  .header .banner,.header .face_value{
    position: relative;
    width:7.5rem;
  }
  .header .banner img{
    width:100%;
    border: none;
  }
  .text1,.text2{
    position: absolute;
    left:0;
    top:0;
    width:100%;
  }
  .text1{
    top:2.65rem;
    font-size:0.48rem;
    line-height:0.67rem;
    text-align:center;
    color:#ff2e24;
  }
  .text2{
    top:6.2rem;
    font-size:1.2rem;
    line-height:1.86rem;
    text-align:center;
    color:#fff;
  }
  .header .face_value img{
    display: block;
    width:4.84rem;
    margin-left:23%;
    border: none;
  }
  .register_top,
  .register .register_top1,
  .register .register_top2,{
    position: relative;
    width: 100%;
  }
  .register .register_top1 img{
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
    border: none;
  }
  /* .shade{
    position: fixed;
    left:0;
    top:0;
    z-index: 1000;
    width: 100%;
    height:100%;
    background:rgba(0,0,0,0.8);
  }  */
  .inviter {
    margin-top:-0.11rem;
    font:0.36rem/0.58rem "Microsoft Yahei";
    text-align: center;
    color:#666;
  }
  .phone{
    border-bottom: 2px solid #ff5b2e;
    color: #ff5b2e;
  }
  .invite_btn{
    width:6.45rem;
    height:1rem;
    margin:0.4rem auto 0;
    font:0.36rem/1rem "Microsoft Yahei";
    letter-spacing:0.03rem;
    text-align:center;
    border-radius:1rem;
    background: #ff6539;
    color:#fff;
    box-shadow:0px 2px 15px #ff6539;
  }
  .cash_coupon{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height:1.02rem;
    margin: 0.5rem auto 0.28rem;
    padding: 0;
  }
  .have_got,.not_get{
    margin-right:0.19rem;
    background: #ececec;
    width: 2.52rem;
    height: 1rem;
  }
  .have_got p,.not_get p{
    font:0.24rem/0.65rem "Microsoft YaHei";
    text-align: center;
    color:#666;
  }
  .have_got span{
    font-weight:600;
    color:#333;
  }
  .have_got div,.not_get div{
    width:0.88rem;
    height:0.35rem;
    margin:0 auto;
    text-align:center;
    font:0.24rem/0.35rem "Microsoft YaHei";
    background: #bfbfbf;
    color:#fff;
  }
  .not_get div{
    background: #ff5d2e;
  }
  .not_get span{
    font-weight:600;
    color:#ff5d2e;
  }
  .not_get{
    margin-left:0.19rem;
    margin-right:0;
  }
  .has_inviter{
    width:100%;
  }
  .nav{
    position: relative;
    display: flex;
    /* justify-content: center; */

    align-items: center;
    width: 100%;
    height:1.2rem;
    margin: 0;
    padding: 0;
  }
  .nav>.nav_item{
    height:1.2rem;
    border-right:1px solid #464646;
    flex-grow:2;
    font:0.24rem;
    text-align: center;
    background: #313131;
    color:#fff;
  }
  .nav_item:nth-of-type(4){
    border:none;
  }
  .nav_tit{
    margin-top:0.08rem;
    font:0.24rem/0.4rem "Microsoft Yahei";
  }
  .user_num{
    font:0.48rem/0.63rem "Microsoft Yahei";
  }
  .nav>.nav_item.active{
    background: #ff5d2e;
  }
  .user_list{
    width:100%;
    /* margin-bottom:1.28rem; */
  }
  .user{
    display: none;
    width:100%;
    /* max-height:5rem; */
  }
  .user.active{
    display: block;
  }
  .user_item{
    display: flex;
    width:92%;
    height:1.55rem;
    margin:0 auto;
    border-bottom:1px solid #e5e5e5;
  }
  .user_photo{
    position:relative;
    width:0.92rem;
    height:0.92rem;
    margin-top:0.32rem;
    border-radius:0.92rem;
    /* background: url('../styles/asset/register/user_photo.png');
    background-size:100% 100%; */
  }
  .user_photo img{
    width:100%;
    height:100%;
  }
  .user_photo span{
    position:absolute;
    left:0.08rem;
    bottom:-0.04rem;
    z-index:10;
    display: inline-block;
    width:0.70rem;
    height:0.26rem;
    font:0.16rem/0.26rem "Microsoft Yahei";
    text-align:center;
    border-radius:0.26rem;

  }
  .user_photo .span-delay{
    background: #def9f0;
    color:#1ace9d;
  }
  .user_photo .span-finish{
    background: #feeae1;
    color:#ff5d2e;
  }
  .user_photo .span-rough{
    background: #cff3ff;
    color:#26b5e4;
  }
  .user_phone{
    width:3.24rem;
    height:100%;
  }
  .user_phone .user_name{
    margin:0.4rem 0 0 0.19rem;
    font:0.24rem/0.38rem "Microsoft Yahei";
    color:#666;
  }
  .user_phone .have{
    margin:0 0.19rem;
    font:0.30rem/0.44rem "Microsoft Yahei";
    font-weight:600;
    color:#333;
  }
  .have span{
    margin:0 0.03rem;
    color:#ff5d2e;
  }
  .user_invite{
    width:2.90rem;
    height:100%;
  }
  .btn{
    display: flex;
    overflow:hidden;
    width:2.80rem;
    height:0.6rem;
    margin-top:0.48rem;
    font:0.24rem/0.6rem "Microsoft Yahei";
    text-align:center;
    border-radius:0.07rem;

  }
  .btn_left{
    width:1.52rem;
    height:100%;
    color:#fff;
    background: #ff5d2e;
  }
  .btn_right{
    width:1.24rem;
    height:0.58rem;
    border:1px dashed red;
    border-radius:0 0.07rem 0.07rem 0 ;
    color:#ff5d2e;
  }
  @keyframes fadeInUpBig {
    from {
      opacity: 0;
      transform: translate3d(0, 3.5rem, 0);
    }
      to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes fadeInDownBig {
    from {
      opacity: 1;
      transform: none;
    }
    to {
      opacity: 0;
      transform: translate3d(0, 3.5rem, 0);
    }
  }
  .shade{
    display: block;
    position: fixed;
    left:0;
    top:0;
    z-index: -1;
    width: 100%;
    height:100%;
    transition:all .3s;
  }
  .shade.bg{
    background:rgba(0,0,0,0.6);
  }
  .share{
    width: 100%;
    height: 3.5rem;
    background-color: #eee;
    transform: translateY(100%);
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 5;
    color:#eee;
  }
  .share_btn{
    display: flex;
    justify-content:center;
    height:2.5rem;
  }
  .left_circle{
    width:3rem;
    height:2.5rem;
  }
  .right_friends{
    width:3rem;
    height:2.5rem;
  }
  .left_circle .ioc,.right_friends .ioc{
    width:1.2rem;
    height:1.6rem;
    margin:0.43rem auto;
    background:url('../styles/asset/register/circle.png');
    background-size:100% 100%;
  }
  .right_friends .ioc{
    background:url('../styles/asset/register/friends.png');
    background-size:100% 100%;
  }
  .clear{
    width:100%;
    height:1rem;
    border-top:0.02rem solid #e5e5e5;
    font:0.36rem/1rem "Microsoft YaHei";
    text-align:center;
    background: #fff;
    color:#333;
  }
  .fadeInUpBig {
    animation-duration: .4s;
    animation-fill-mode: both;
    animation-name: fadeInUpBig;
  }
  .fadeInDownBig {
    animation-duration: 0.6s;
    animation-fill-mode: both;
      animation-name: fadeInDownBig;
  }

  .note{
    display: block;
    position: fixed;
    left:0;
    top:0;
    z-index: -1;
    width: 100%;
    height:100%;
    transition:'z-index' .3s;
    /* transition:top 0s; */
  }
  .note.bg{
    background:rgba(0,0,0,0.6);
  }
  .dialog{
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-3rem;
    margin-top:-1.31rem;
    width:6rem;
    height:2.62rem;
    border-radius:0.1rem;
    background:#fff;
  }
  .note_content{
    width:5.20rem;
    height:0.9rem;
    margin:0.44rem auto 0;
    font:0.24rem/0.38rem "Microsoft YaHei";
    color:#333;
  }
  .note_content span{
    color:#999;
  }
  .note_btnBox{
    display:flex;
    justify-content:center;
  }
  .clear_send,.confirm{
    width:2.3rem;
    height:0.75rem;
    margin-top:0.23rem;
    border-radius:0.1rem;
    text-align:center;
    font:0.24rem/0.75rem "Microsoft Yahei";
    color:#fff;
    background: #333;
  }
  .confirm{
    margin-left:0.42rem;
    background: #ff5d2e;
  }
  .modal_show{
    z-index: 100;
  }
</style>